<html><head><title> Ajax MenuLoad </title>
<script type="text/javascript">

///////////////////////////////////////////////////////////////////////////////////////////////////

    function configureDropDownLists(ddl1,ddl2) {
        var colours = new Array('Black', 'White', 'Blue');
        var shapes = new Array('Square', 'Circle', 'Triangle');
        var names = new Array('John', 'David', 'Sarah');

        switch (ddl1.value) {
            case 'Colours':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < colours.length; i++) {
                    createOption(document.getElementById(ddl2), colours[i], colours[i]);
                }
                break;
            case 'Shapes':
                document.getElementById(ddl2).options.length = 0; 
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), shapes[i], shapes[i]);
                }
                break;
            case 'Names':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < colours.length; i++) {
                    createOption(document.getElementById(ddl2), names[i], names[i]);
                }
                break;
                default:
                    document.getElementById(ddl2).options.length = 0;
                break;
        }

    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }

//////////////////////////////////////////////





</script></head>
<body>



<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value="">Select Option</option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>

<select id="ddl2">
</select>
</body></html>